<template>
  <div>
    <!-- 上边的卡片 -->

    <div>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XX万辆</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>当年销量</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XX万辆</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>当年产量</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>XX万辆</h2></span>
            </div>
            <div>
              <el-container>
                <el-aside width="200px">
                  <h1>当年存量</h1>
                </el-aside>
                <el-main>
                  <h2>
                    环比:x% <i class="el-icon-bottom" style="color:#f56c6c"></i>
                  </h2>
                  <h2>
                    同比:x% <i class="el-icon-top" style="color:#67c23a"></i>
                  </h2>
                </el-main>
              </el-container>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 堆叠柱状图 -->
    <div id="myChart">
      <div id="main" style="width: 1200px;height:400px;"></div>
    </div>

    <!-- 每月的数据表格 -->
    <div>
      <div class="month_table">
        <el-table :data="tableData" style="width:1260px">
          <el-table-column prop="category_months" label="类别\月份" width="180">
          </el-table-column>
          <el-table-column prop="January" label="一月" width="90">
          </el-table-column>
          <el-table-column prop="February" label="二月" width="90">
          </el-table-column>
          <el-table-column prop="March" label="三月" width="90">
          </el-table-column>
          <el-table-column prop="April" label="四月" width="90">
          </el-table-column>
          <el-table-column prop="May" label="五月" width="90">
          </el-table-column>
          <el-table-column prop="June" label="六月" width="90">
          </el-table-column>
          <el-table-column prop="July" label="七月" width="90">
          </el-table-column>
          <el-table-column prop="August" label="八月" width="90">
          </el-table-column>
          <el-table-column prop="September" label="九月" width="90">
          </el-table-column>
          <el-table-column prop="October" label="十月" width="90">
          </el-table-column>
          <el-table-column prop="November" label="十一月" width="90">
          </el-table-column>
          <el-table-column prop="December" label="十二月" width="90">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myChart",
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));

      let option = {
        title: {
          text: "单位(万辆)",
          left: "20px",
          textStyle: {
            color: "#436EEE",
            fontSize: 17
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          itemWidth: 15,
          itemHeight: 15,
          data: ["产量", "存量", "销量"]
        },
        xAxis: {
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          splitLine: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "产量",
            type: "bar",
            stack: "使用情况",
            data: [
              18.8,
              17.2,
              22.3,
              20.3,
              12.7,
              18.6,
              19.3,
              12.6,
              25.9,
              24.8,
              17.8,
              6.9
            ],
            itemStyle: {
              normal: { color: "#FF8849" }
            }
          },
          {
            name: "存量",
            type: "bar",
            stack: "使用情况",
            data: [
              18.8,
              17.2,
              22.3,
              20.3,
              12.7,
              18.6,
              19.3,
              12.6,
              25.9,
              24.8,
              17.8,
              6.9
            ],
            itemStyle: {
              normal: { color: "#3FBB49" }
            }
          },
          {
            name: "销量",
            type: "bar",
            stack: "使用情况",
            data: [
              18.8,
              17.2,
              22.3,
              20.3,
              12.7,
              18.6,
              19.3,
              12.6,
              25.9,
              24.8,
              17.8,
              6.9
            ],
            itemStyle: {
              normal: { color: "#FFFF00" }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  },

  mounted() {
    this.drawChart();
  },

  data() {
    return {
      tableData: [
        {
          category_months: "汽车销售量(万辆)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        },
        {
          category_months: "汽车库存量(万辆)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        },
        {
          category_months: "汽车产量(万辆)",
          January: 18.8,
          February: 17.2,
          March: 22.3,
          April: 20.3,
          May: 12.7,
          June: 18.6,
          July: 19.3,
          August: 12.6,
          September: 25.9,
          October: 24.8,
          November: 17.8,
          December: 6.9
        }
      ]
    };
  }
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  float: left;
  margin-left: 50px;
  width: 480px;
  height: 180px;
}

.month_table {
  margin-left: 150px;
}

.main {
  margin-top: 50px;
}
</style>
